import React from 'react'
import { withRouter} from 'react-router-dom'


class ContentBox extends React.Component{
    constructor(props){
        super(props)
        this.state={
            info:this.props.ArticleBrief,
        }
    }
    pushToPost=()=>{
        this.props.history.push('/post/'+this.state.info.article_id)
    }

    // componentDidMount(){
    //     // setInterval(()=>
    //     // this.setState({now:Date.parse(new Date())})
    //     // ,100)
    //     setTimeout(()=>this.setState({now:Date.parse(new Date())}),1e20)
    // }
    // shouldComponentUpdate(){
    //     console.log(this.props.history)
    //     console.log(2)
    //     document.documentElement.scrollTop = this.props.history
    //     return true
    // }
    render(){
        let viewSrc = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/view.1eda8fa.png'
        let likeSrc = ''
        let commentSrc = ''
        let picSrc = this.state.info.article_info.cover_image?this.state.info.article_info.cover_image:'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/934d1d63530b4bddb4d133a8d3d81ef5~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp'
        let s = new Date(new Date().setHours(0, 0, 0, 0)).getTime()/1000
        let time = Number(this.state.info.article_info.ctime)
        let a = s-time
        let date = null
        if(a<3600)  
            date='1小时内'
        else if(a<86400)
            date = (a/3600).toFixed(0)+'小时前'
        else if(a<604800)
            date = (a/86400).toFixed(0)+'天前'
        else if(a<2419200)
            date = (a/604800).toFixed(0)+'周前'
        else if(a<29030400)
            date = (a/2419200).toFixed(0)+'月前'
        else 
            date = (a/29030400).toFixed(0)+'年前'
        return(
            <div>
                <div className='box' style={{width:375,height:141,display:'flex'}} onClick={this.pushToPost}>
                    <div className='space' style={{width:20,height:141}}>

                    </div>
                    <div className='info' style={{width:335,height:141,display:'flex',flexWrap:'wrap'}}>
                        <div className='spaceTop' style={{width:335,height:12}}></div>
                        <div className='userAndTimeAndTag' style={{width:335,height:22,display:'flex',alignItems:'center'}}>
                            <div className='user' style={{fontSize:'13px',height:22,lineHeight:'22px',textAlign:'center',color:'#4e5969'}}>
                                {this.state.info.author_user_info?this.state.info.author_user_info.user_name:'洛竹'}
                            </div>
                            <div className='space' style={{width:8,borderRight:'1px solid hsla(0,0%,59.2%,.2)',height:14}}>

                            </div>
                            <div className='space' style={{width:7,height:22}}>

                            </div>
                            <div className='time' style={{fontSize:'13px',height:22,lineHeight:'22px',color:'#86909c'}}>
                                {date}
                            </div>
                            <div className='space' style={{width:8,borderRight:'1px solid hsla(0,0%,59.2%,.2)',height:14}}>

                            </div>
                            <div className='space' style={{width:7,height:22}}>

                            </div>
                            <div className='tagList' style={{display:'flex',alignItems:'center'}}>
                                <div className='tag' style={{fontSize:'13px',height:22,lineHeight:'22px',color:'#86909c'}}>
                                    {this.state.info.category_info.first_category_name?this.state.info.category_info.first_category_name:'前端'}
                                </div>
                                <div style={{width:17,height:22,display:'flex',alignItems:'center',justifyContent:'center'}}>
                                    <div className='point' style={{height:2,width:2,borderRadius:'100%',backgroundColor:'#4e5969'}}/>
                                </div>
                                <div className='tag' style={{fontSize:'13px',height:22,lineHeight:'22px',color:'#86909c'}}>
                                    {this.state.info.category_info.second_category_name?this.state.info.category_info.second_category_name:"React Native"}
                                </div>
                                {/* <div style={{width:17,height:22,display:'flex',alignItems:'center',justifyContent:'center'}}>
                                    <div className='point' style={{height:2,width:2,borderRadius:'100%',backgroundColor:'#4e5969'}}/>
                                </div>
                                <div className='tag' style={{fontSize:'13px',height:22,lineHeight:'22px',color:'#86909c'}}>
                                    架构
                                </div> */}
                            </div>
                        </div>
                        <div className='content' style={{width:335,height:107,display:'flex',flexWrap:'wrap'}}>
                            <div className='spaceTop' style={{width:335,height:10}}>

                            </div>
                            <div className='infoAndPic' style={{width:335,height:84,display:'flex'}}>
                                <div className='info' style={{width:191,height:84}}>
                                    <div className='title' style={{width:176,height:24,fontSize:'16px',color:'#1d2129',overflow:'hidden',textOverflow:"ellipsis",fontWeight:'700',lineHeight:'24px',whiteSpace:'nowrap'}}>
                                        {this.state.info.article_info.title?this.state.info.article_info.title:"每个前端都值得拥有自己的组件库，就像每个夏天都拥有西瓜🍉"}
                                    </div>
                                    <div className='space' style={{height:8,width:191}}>

                                    </div>
                                    <div className='content' style={{height:22,width:176,color:'#86909c',fontWeight:'400',overflow:'hidden',whiteSpace:'nowrap',textOverflow:"ellipsis",fontSize:'13px',lineHeight:'22px'}}>
                                        {this.state.info.article_info.brief_content?this.state.info.article_info.brief_content:"这是一篇干货比较多的组件库搭建实战教程，不仅有通用的代码规范、提交规范、文档维护、单元测试、GitHub Action 配置的讲解，还涉及基于 lerna 的多包管理架构..."}
                                    </div>
                                    <div className='space' style={{height:10,width:191}}>

                                    </div>
                                    <div className='buttonList' style={{height:20,width:191,display:'flex',alignItems:'center',flexWrap:'wrap'}}>
                                        <div className='view' style={{height:20,width:60,display:'flex',flexWrap:'wrap',alignItems:'center'}}>
                                            <img className='viewPic' src={viewSrc} height='16' width='16' alt='1'></img>
                                            <div className='space' style={{width:4,hangingPunctuation:20}}>

                                            </div>
                                            <div className='viewData' style={{fontSize:'13px',lineHeight:'20px',color:'#4e5969'}}>
                                                {this.state.info.article_info.view_count>10000?(this.state.info.article_info.view_count/10000).toFixed(1)+'w':this.state.info.article_info.view_count}
                                            </div>
                                        </div>
                                        <div className='like' style={{height:20,width:60,display:'flex',flexWrap:'wrap',alignItems:'center'}}>
                                            <img className='likePic' alt='' height='16' width='16' src={likeSrc}></img>
                                            <div className='space' style={{width:4,hangingPunctuation:20}}>

                                            </div>
                                            <div className='likeData' style={{fontSize:'13px',lineHeight:'20px',color:'#4e5969'}}>
                                                {this.state.info.article_info.collect_count===null?this.state.info.article_info.collect_count:this.state.info.article_info.collect_count}
                                            </div>
                                        </div>
                                        <div className='comment' style={{height:20,width:60,display:'flex',flexWrap:'wrap',alignItems:'center'}}>
                                            <img alt='' className='commentPic' height='16' width='16' src={commentSrc}></img>
                                            <div className='space' style={{width:4,hangingPunctuation:20}}>

                                            </div>
                                            <div className='commentData' style={{fontSize:'13px',lineHeight:'20px',color:'#4e5969'}}>
                                                {this.state.info.article_info.comment_count===null?this.state.info.article_info.comment_count:this.state.info.article_info.comment_count}
                                            </div>      
                                        </div>
                                    </div>
                                </div>
                                <div className='space' style={{width:24,height:84}}>

                                </div>
                                <div className='pic' style={{width:120,height:84}}>
                                    <img alt='a' src={picSrc} style={{objectFit:'cover',width:120,height:80}}></img>
                                </div>
                            </div>
                            <div className='spaceBottom' style={{height:12,width:335,borderBottom:'1px solid hsla(0,0%,59.2%,.2)'}}>

                            </div>
                        </div>
                    </div>
                    <div className='space' style={{width:20,height:141}}>

                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(ContentBox)